<template>  
    <div class="songlist" v-if="songlist.length !== 0">  
      <!-- 歌单列表 -->  
      <div class="song-list">  
        <SongListItem v-for="(item, index) in songlist" :key="index" :songlistitem="item" />  
      </div>  
    </div>  
  </template>  
    
  <script setup>  
  import { defineProps } from 'vue';  
  import SongListItem from "./SongListItem.vue";  
    
  // 使用 defineProps 来定义组件接收的 props  
  const props = defineProps({  
    songlist: {  
      type: Array,  
      default: () => [],  
    },  
  });  
  </script>  
    
  <style lang="less" scoped>  
  /* 列表 */  
  .song-list {  
    display: grid;  //网格布局
    justify-content: space-between;  //水平和垂直方向上均匀分布
    align-content: space-between;  
    grid-template-rows: repeat(8, auto-fill);   //定义了网格的行和列的布局方式，这里设置了 8 行和 6 列，每列宽度为 15%。
    grid-template-columns: repeat(6, 15%);  //每列宽度为 15%。
  }  
  </style>